<!-- 班次设置 -->
<template>
  <div class="rthcHead">
    <div class="rthcImg">
      <img src="@/assets/img/personnelImage/岗位需求库.png">
      <span class="rthcTi" title="班次管理">班次管理</span>
    </div>
    <div class="rthc-handle">
      <span class="rthc-handle-pri">
          <el-button type="primary" @click="dialogTableVisible = true">新建</el-button>
      </span>
      <span class="rthc-handle-more">
        <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <el-icon>
            <setting/>
        </el-icon>
        </span>
       <template v-slot:dropdown>
         <el-dropdown-menu>
           <el-dropdown-item icon="el-icon-plus" @click="dialogTableVisible = true">新建</el-dropdown-item>
<!--           <el-dropdown-item icon="el-icon-circle-plus-outline">流程审批</el-dropdown-item>-->
           <el-dropdown-item icon="el-icon-check" @click="delSele">删除</el-dropdown-item>
         </el-dropdown-menu>
       </template>
    </el-dropdown>
      </span>
    </div>
  </div>
  <div style="height: 100%; min-height: 235px;">
    <div class="rthc-list-table" style="margin-top: 0">
      <el-table ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                :header-cell-style="{background:'#F7FBFE',color:'#606266'}"
                @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column label="班次ID" prop="sid" style="display: none"/>
        <el-table-column label="班次名称" prop="name" sortable />
        <el-table-column label="考勤时间" prop="otime" sortable/>
        <el-table-column label="班次状态" prop="enabled" :formatter="formatter">
          <template #default="xx">
            <el-tag type="warning" v-if="xx.row.enabled === 0">启用</el-tag>
            <el-tag type="success" v-else-if="xx.row.enabled === 1">禁用</el-tag>
            <el-tag v-else-if="xx.row.enabled === 2">已失效</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="enabled" :formatter="formatter">
          <template #default="xx">
            <el-button type="warning" v-if="xx.row.enabled === 0" @click="disSS(xx.row.sid)">禁用</el-button>
            <el-button type="success" v-else-if="xx.row.enabled === 1" @click="useSS(xx.row.sid)">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
<!-- 班次设置界面  -->
  <el-dialog v-model="dialogTableVisible" title="新建班次设置" width="1000px">
    <el-form :model="formData" ref="vForm"  :rules="rules" label-position="left" label-width="80px"
             size="default" @submit.prevent>
      <el-row>
        <el-col :span="4" class="grid-cell">
          <div class="static-content-item">
            <div>班次名称：</div>
          </div>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="" label-width="0" prop="name" class="required">
            <el-input v-model="formData.name" size="large" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="grid-cell">
          <div class="static-content-item">
            <div>一天内上下班次数：</div>
          </div>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="" label-width="0" prop="duration">
            <el-radio-group v-model="formData.duration" size="large">
              <el-radio v-for="(item, index) in csOptions" :key="index" :label="item.value"
                        :disabled="item.disabled" style="{display: inline}" @click="countChange(item.value,item.label)">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-table
          :data="formDate"
          border
          style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="id" label="次数" width="180">
          <template #default="scope">
            第{{scope.row.index}}次：
          </template>
        </el-table-column>

        <el-table-column prop="workTime" label="上班时间">
            <template #default="scope">
              <el-time-select
                  v-model="scope.row.workTime"
                  class="full-width-input"
                  :picker-options="{start: '08:00',step: '00:30',end: '10:00'}"
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  placeholder="选择时间">
              </el-time-select>
            </template>
        </el-table-column>
        <el-table-column prop="leaveTime" label="下班时间">
            <template #default="scope">
              <el-time-select
                  v-model="scope.row.leaveTime"
                  class="full-width-input"
                  :picker-options="{start: '17:00',step: '00:30',end: '24:00'}"
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  placeholder="选择时间">
              </el-time-select>
            </template>
        </el-table-column>
        <el-table-column prop="advanceTime" label="允许提前打卡时间">
          <template #default="scope">
            <el-input v-model="scope.row.advanceTime" placeholder="默认15分钟" maxlength="2" oninput="value=value.replace(/[^\d]/g,'');"/>
          </template>
        </el-table-column>
        <el-table-column prop="delayTime" label="结束打卡时间">
          <template #default="scope">
            <el-input v-model="scope.row.delayTime" placeholder="默认15分钟"  maxlength="2" oninput="value=value.replace(/[^\d]/g,'');"/>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-row>
      <el-col :span="6" :push="20" class="grid-cell">
        <div class="static-content-item">
          <el-button @click="submitForm">提交</el-button>
          <el-button @click="dialogTableVisible = false">取消</el-button>
        </div>
      </el-col>
    </el-row>
  </el-dialog>

</template>

<script>

import {addShif, delAll, selAll, uptOne, uptZero} from "../../../network/per/ShiftSetUp";

export default {
  data() {
    return{
      // 班次详情
      formDate: [
        {workTime:null,leaveTime:null,advanceTime:null,delayTime:null}
      ],
      dialogTableVisible:false,
      multipleSelection: [],
      tableData:[],
      // 班次表
      formData: {
        name: "",
        duration: null,
      },
      rules: {
        name: [{
          required: true,
          message: '字段值不可为空',
        }],
      },
      csOptions: [
          {
        "label": "1天1次上下班",
        "value": 1
      }, {
        "label": "1天2次上下班",
        "value": 2
      }, {
        "label": "1天3次上下班",
        "value": 3
      }],
    }
  },
  mounted() {
      this.loginit();
    },
  methods:{
    //初始化方法
    loginit(){
      selAll().then((das)=>{
        console.log("初始化",das)
        this.tableData = das;
      })
    },
    // table动态生成多少条数据
    countChange (num,til) {
      this.formDate = []
      var index = 0
      var obj = {}
      for (var i = 0; i < num; i++) {
        index++
        obj = {
          index: index,
          positionCode: null
        }
        this.formDate.push(obj)
      }
      this.formData.name = til
    },
    formatter(row, column) {
      return row.address;
    },
    //多选框选中事件
    handleSelectionChange(val) {
      this.multipleSelection = []
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i].sid)
      }
    },
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
        let arr = {
          shift :{},
          shiftPhase:[{}]
        }
        arr.shift = this.formData;
        arr.shiftPhase = this.formDate;
        addShif(arr).then((das)=>{
          if (das.code === 200){
            this.$notify({
              title:'成功',
              message:'新增班次完毕！',
              type:'success'
            })
            this.dialogTableVisible = false;
            this.loginit();
          }else{
            this.$notify({
              title:'失败',
              message:'新增班次异常!',
              type:'error'
            })
          }
        })
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    },
    // 删除表格
    delSele(){
      console.log("删除",this.multipleSelection)
      delAll(this.multipleSelection).then((das)=>{
        if (das.code === 200) {
          this.$notify({
            title: '成功',
            message: '这是一条成功的提示消息',
            type: 'success'
          })
          this.loginit();
        }else{
          this.$notify({
            title: '失败',
            message: '这是一条失败的提示消息',
            type: 'error'
          })
        }
      })
    },
    // 禁用
    disSS(val){
      if (this.multipleSelection.length === 0 || this.multipleSelection === ''){
        uptOne(val).then((das)=>{
          if (das.code === 200) {
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            })
            this.loginit();
          }else{
              this.$notify({
                title: '失败',
                message: '这是一条失败的提示消息',
                type: 'error'
              })
          }
        })
      }else{
        uptOne(this.multipleSelection).then((das)=>{
          if (das.code === 200) {
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            })
            this.loginit();
          }else{
            this.$notify({
              title: '失败',
              message: '这是一条失败的提示消息',
              type: 'error'
            })
          }
        })
      }
    },
    // 启用
    useSS(val){
      if (this.multipleSelection.length === 0 || this.multipleSelection === ''){
        uptZero(val).then((das)=>{
          if (das.code === 200) {
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            })
            this.loginit();
          }else{
            this.$notify({
              title: '失败',
              message: '这是一条失败的提示消息',
              type: 'error'
            })
          }
        })

      }else{
        uptZero(this.multipleSelection).then((das)=>{
          if (das.code === 200) {
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            })
            this.loginit();
          }else{
            this.$notify({
              title: '失败',
              message: '这是一条失败的提示消息',
              type: 'error'
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/RecruitHeadcount";
</style>
<style>
.el-time-spinner__list li{
  width: 70px;
}

.el-select-dropdown__wrap{
  max-width: 90px;
}
</style>